<template>
    <div class="teachers">
        <div class="header">
			<div class="header-item">
				<span>教师名称</span>
				<el-input
				placeholder="请输入教师名称"
				size="mini"
				v-model="searchQuery.wechat_name"
				clearable
				>
				</el-input>
			</div>
			<div class="header-item select-item">
				<span>是否废弃</span>
				<el-select
				v-model="searchQuery.state"
				placeholder="是否废弃"
				size="mini"
				clearable
				>
				<el-option
					v-for="item in isNotoptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>
				</el-option>
				</el-select>
			</div>
			<div class="header-item select-item">
				<span>是否可登录</span>
				<el-select
				v-model="searchQuery.status"
				placeholder="是否可登录"
				size="mini"
				clearable
				>
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>
				</el-option>
				</el-select>
			</div>
			<div class="search-button">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="search"
				>搜索</el-button
				>
				<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
			</div>
		</div>

		<div class="add-button">
			<el-button type="primary" icon="el-icon-plus" size="mini"  @click="addTechC">新增教师</el-button>
		</div>

    	<el-table :data="tableData" style="width: 95%;margin: 20px  40px ;">
			<el-table-column prop="name" label="用户名称" fixed />
			<el-table-column prop="real_name" label="姓名" align="center" :show-overflow-tooltip="true" />
    		<el-table-column prop="phone" label="登录账号" align="center" min-width="110" />
    		<el-table-column prop="wechat_user_id" label="绑定企微号" width="130" align="center" :show-overflow-tooltip="true">
    		</el-table-column>
    		<el-table-column  prop="wechat_name" label="企微名称" align="center" min-width="120" :show-overflow-tooltip="true" />
			<el-table-column prop="link_id" label="获客链接ID" width="130" align="center" :show-overflow-tooltip="true" >
			</el-table-column>
			<el-table-column prop="link_name" width="130" label="链接名称" align="center" :show-overflow-tooltip="true" >
			</el-table-column>
			<el-table-column  prop="link_url" width="130" label="获客链接" align="center" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="wechat_name" label="标记废弃" align="center">
				<template slot-scope="scope">
					<el-switch v-model ="scope.row.state" @change="changeStateList(scope.row)" />
				</template>
			</el-table-column>
    		<el-table-column prop="wechat_name" label="登录权限" align="center">
				<template slot-scope="scope">
					<el-switch v-model ="scope.row.status" @change="changeStatusList(scope.row)" />
				</template>
			</el-table-column>
   		 	<el-table-column prop="update_by"  label="最近修改人" align="center" />
    		<el-table-column prop="update_time" label="最近修改时间" width="160" align="center" />
			<el-table-column prop="wechat_name" label="操作" fixed="right" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="changeItem(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
    	</el-table>
		<pagination 
			class="footer-page"
			v-show="total>0"
			:total="total"
			:page.sync="searchQuery.page"
			:limit.sync="searchQuery.pageSize"
			@pagination="init"
		/>
    	<el-dialog  :title="addTitle" :visible.sync="addFlag" append-to-body destroy-on-close width="700px" @close="closeDia">
			<addTech  :editOne="editOne" @refresh="reLoad"></addTech>
		</el-dialog>
    </div>
</template>

<script>
import {getList,changeState,changeLoginStatus} from '@/api/techearsNew.js'
import  addTech  from './addtech/index'
export default {
    components:{
        addTech
    },
    data() {
        return {
            addTitle:'',
            editOne:'',
            addFlag: false,
            tableData:[],
            total:0,
            searchQuery:{
                wechat_name:'',
                state:'',
                status:'',
                page: 0,
                pageSize: 20
            },
            options:[{
                label:'是',
                value:1
            },
            {
                label:'否',
                value:0
            },
        ],
        isNotoptions:[{
                label:'是',
                value:0
            },
            {
                label:'否',
                value:1
            },
        ]
        }
    },
    methods: {
        init(){
            getList(this.searchQuery).then(res=>{
                this.tableData=res.data.data
                this.tableData.forEach(ele => {
                 ele.state=ele.state==1?false:true
                 ele.status=ele.status==1?true:false
                });
                this.total=res.data.total
            })
        },
        changeItem(item){
            this.addFlag=true
            this.addTitle='编辑用户'
            this.editOne=item
        },
        reLoad(){
            this.addFlag=false
                this.editOne=''
            setTimeout(() => {
                this.init() 
            }, 400);
        },
        closeDia(){
            this.editOne=''
        },
        search(){
          this.searchQuery.page=1
            this.init()
        },
        reset(){
            this.searchQuery={
                wechat_name:'',
                state:'',
                status:'',
                page: 0,
                pageSize: 10
            }
            this.init()
        },
        changeStateList(item){
            let obj ={}
            obj.id=item.id
            obj.state=item.state?1:0
            changeState(obj).then(res=>{
              this.$message.success('修改废弃状态成功');
            })
            setTimeout(() => {
                this.init() 
            }, 400);
        },
        changeStatusList(item){
            let obj ={}
            obj.id=item.id
            obj.status=item.status?0:1
            changeLoginStatus(obj).then(res=>{
              this.$message.success('修改登录权限成功');
            })
            setTimeout(() => {
                this.init() 
            }, 400);
        },
        addTechC(){
            this.addFlag=true
            this.addTitle='新增用户'
        }
    },
    created(){
        this.init()
    }
}
</script>
<style lang="scss" scoped>
    .teachers{
        margin-top: 20px;
	 padding-bottom: 25px;
   .item{
    min-width: 110px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 显示省略号 */
   }
        .header{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
      margin-left: 40px;
			.header-item{
				display: flex ;
				justify-content:flex-start;
				align-items: center;
        margin-right: 50px;
				span{
   					 font-size: 14px;
             display: block;
   				 color: #606266;
    			line-height: 40px;
				font-weight: 700;
        min-width: 56px;
        margin-right: 5px;
				}
			}
            .select-item{
                width: 270px;
            }
			.search-button{
				display: flex;
				align-items: center;
			}
		}
          .add-button{
        margin-left: 40px;
        margin-top: 20px;
    }
    }
</style>